<template>
  <div
    v-if="showBubble"
    class="floating-bubble"
    @click="handleClick"
    :class="{ 'show': showBubble }"
    @mousedown="startDrag"
    @touchstart="startDrag"
    :style="{ left: position.x + 'px', top: position.y + 'px' }"
  >
    <span class="save-text">聊天室</span>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const showBubble = ref(false)
const position = ref({ x: window.innerWidth - 120, y: window.innerHeight - 120 }) // 初始位置在右下角
let isDragging = false;

// 监听路由变化
watch(() => route.path, (newPath) => {
  // 在这些页面不显示小圆球
  const hiddenPaths = [
    '/teacher/chat/index',
    '/teacher/manager',
    '/teacher/manager/lessonschedule',
    '/student',
    '/login',
    '/register',
    '/ai'
  ]
  showBubble.value = !hiddenPaths.some(path => newPath.includes(path))
}, { immediate: true })

// 监听窗口大小变化，更新位置
const updatePosition = () => {
  position.value = {
    x: window.innerWidth - 120,
    y: window.innerHeight - 120
  }
}

onMounted(() => {
  window.addEventListener('resize', updatePosition)
})

const handleClick = () => {
  if (!isDragging) { // 只有在没有拖动的情况下才跳转
    setTimeout(() => {
      router.push('/teacher/chat/index')
    }, 300)
  }
}

// 拖动逻辑
const startDrag = (event) => {
  isDragging = true; // 设置为拖动状态
  event.preventDefault()
  const initialX = event.clientX || event.touches[0].clientX
  const initialY = event.clientY || event.touches[0].clientY
  const offsetX = initialX - position.value.x
  const offsetY = initialY - position.value.y

  const onMouseMove = (moveEvent) => {
    const newX = (moveEvent.clientX || moveEvent.touches[0].clientX) - offsetX
    const newY = (moveEvent.clientY || moveEvent.touches[0].clientY) - offsetY
    position.value = { x: newX, y: newY }
  }

  const onMouseUp = () => {
    isDragging = false; // 拖动结束，重置标志
    window.removeEventListener('mousemove', onMouseMove)
    window.removeEventListener('mouseup', onMouseUp)
    window.removeEventListener('touchmove', onMouseMove)
    window.removeEventListener('touchend', onMouseUp)
  }

  window.addEventListener('mousemove', onMouseMove)
  window.addEventListener('mouseup', onMouseUp)
  window.addEventListener('touchmove', onMouseMove)
  window.addEventListener('touchend', onMouseUp)
}
</script>

<style scoped>
.floating-bubble {
  position: fixed;
  width: 80px;  /* 固定圆球大小为80px */
  height: 80px;  /* 固定圆球大小为80px */
  background-color: rgba(24, 144, 255, 0.2); /* 半透明蓝色 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.5s ease;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
  z-index: 1000;
}

.floating-bubble.show {
  opacity: 1;
  transform: scale(1);
}

.save-text {
  color: #1890ff;
  font-size: 14px;  /* 减小文字大小 */
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease 0.2s;
}

.floating-bubble.show .save-text {
  opacity: 1;
  transform: translateY(0);
}

.floating-bubble:hover {
  background-color: rgba(24, 144, 255, 0.3);
}
</style>